Vue学习（前置）------代码规范

2018-03-14

写不了一手漂亮的代码的程序猿不是好画家、

其实这是在接触Vue时候就开始看的了，不过现在发现也不晚，遵守一定约定俗成的规范，让自己的代码更通俗易懂。
传送门：
vue官方代码风格
 Vue.js 组件编码规范-小丸子的博客

个人遵守的规范：

组件文件名称(kebab-case) my-component.vue
注册组件时组件名称（PascalCase） myComponent
html文件中使用组件 (kebab-case)
props 值加类型验证 props:{‘msg’:String}
组件命名为多个单词
指令缩写
模板中使用简单表达式，使用计算属性
v-for设置键值

组件命名为多个单词

这样的目的是可以防止未来跟HTML元素冲突
Bad

Vue.component('todo', {
  // ...
})

export default {
  name: 'Todo',
  // ...
}

Good

Vue.component('todo-item', {
  // ...
})

export default {
  name: 'TodoItem',
  // ...
}
```  
### data必须是函数
当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数。

```js
// In a .vue file
export default {
  data () {
    return {
      foo: 'bar'
    }
  }
}

Prop验证类型

它们写明了组件的 API，所以很容易看懂组件的用法；
在开发环境下，如果向一个组件提供格式不正确的 prop，Vue 将会告警，以帮助你捕获潜在的错误来源。

Bad

1	props: ['status']

Good

1
2
3

props: {
  status: String
}

v-for 设置键值

Bad

<ul>
  <li v-for="todo in todos">
    {{ todo.text }}
  </li>
</ul>

Good

  <ul>
  <li
    v-for="todo in todos"
    :key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>

组件名称大小写

单文件组件名称大小写

个人默认使用，组件名使用(kebab-case)规则
Bad

1 2	components/ \|- mycomponent.vue

Good

1 2	components/ \|- my-component.vue

模板中组件名大小写

个人默认使用，组件名使用(kebab-case)规则

js中组件名称

export default {
  name: 'MyComponent',
  // ...
}

import MyComponent from './my-component.vue'

不在模板中使用复杂的表达式

在需要复杂的表达式时候，使用计算属性
Bad

{{
  fullName.split(' ').map(function (word) {
    return word[0].toUpperCase() + word.slice(1)
  }).join(' ')
}}

Good

<!-- 在模板中 -->
{{ normalizedFullName }}

computed: {
  normalizedFullName: function () {
    return this.fullName.split(' ').map(function (word) {
      return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
  }
}